<script setup>
// SEO
useHead({
  title: '智信耐材科技有限公司-一家专注耐材领域的高新技术企业',
  meta: [
    {
      name: 'description',
      content: '智信耐材科技有限公司, 智信耐材, 耐材, 耐材公司, 耐材企业',
    },
    {
      name: 'keywords',
      content: '智信耐材科技有限公司, 智信耐材, 耐材, 耐材公司, 耐材企业',
    },
    {
      name: 'baidu-site-verification',
      content: 'codeva-u0rrhFfuTm',
    },
  ],
})

const { locale } = useI18n()
const route = useRoute()
const navList = useNav()
// 导航栏高亮
function isActive(to) {
  let path = ''
  const firstIndex = route.path.indexOf('/')
  const secondIndex = route.path.indexOf('/', firstIndex + 1)
  if (secondIndex === -1) {
    path = route.path
  } else {
    path = route.path.slice(firstIndex, secondIndex)
  }

  return path === to
}
</script>

<template>
  <!-- header 固定导航栏 -->
  <header>
    <div class="logo">
      <img src="/智信logo.png" alt="" />
      <h1>
        智信耐材科技有限公司
        <br />
        <span>Chengdu ZX Technology Co., Ltd</span>
      </h1>
    </div>

    <nav>
      <ul>
        <li v-for="item in navList" :key="item.name">
          <NuxtLink :to="item.to" :class="{ active: isActive(item.to) }">{{
            $t(item.name)
          }}</NuxtLink>
        </li>
      </ul>
    </nav>

    <div class="language">
      <form>
        <el-select v-model="locale" style="width: 100px">
          <el-option value="en" key="en" :label="$t('English')"></el-option>
          <el-option value="zh" key="zh" :label="$t('Chinese')"></el-option>
        </el-select>
      </form>
    </div>
  </header>

  <!-- main -->
  <div>
    <NuxtPage />
  </div>

  <!-- footer -->
  <footer>
    <div class="wrapper">
      <div class="top">
        <div class="left">
          <dl>
            <dt>{{ $t('About') }}</dt>
            <dd>{{ $t('company profile') }}</dd>
            <dd>{{ $t('company culture') }}</dd>
            <dd>{{ $t('patent licence') }}</dd>
            <dd>{{ $t('Honor certificate') }}</dd>
          </dl>
          <dl>
            <dt>{{ $t('special offers') }}</dt>
            <dd>{{ $t('double eleven') }}</dd>
            <dd>{{ $t('black Friday') }}</dd>
            <dd>{{ $t('christmas sale') }}</dd>
          </dl>
          <dl>
            <dt>常见问题</dt>
            <dd>智信修复</dd>
          </dl>
        </div>
        <div class="right">
          <dl>
            <dt>联系方式</dt>
            <dd>地址：成都市温江区科林西路618号华银工业港7区1号</dd>
            <dd>电话：028-6193 4900</dd>
            <dd>邮箱：cdzxnckj@163.com</dd>
          </dl>
          <div class="img">
            <img src="@/assets/images/WeChat QR.png" alt="" />
          </div>
        </div>
      </div>
      <div class="bottom">
        备案/许可证编号：
        <a href="https://beian.miit.gov.cn/" target="_blank">
          蜀ICP备2024062541
        </a>
        Copyright © 2023 智信耐材科技有限公司 版权所有
      </div>
    </div>
  </footer>
</template>

<style lang="less" scoped>
.banner {
  height: 500px;
  background-size: cover;
  background-position: center;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 100px;
  height: 100px;
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #fff;
  .logo {
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: auto;
    }
    h1 {
      font-size: 30px;
      font-weight: 700;
      color: #000;
      margin-left: 20px;
      span {
        font-size: 20px;
      }
    }
  }
  nav {
    ul {
      list-style: none;
      display: flex;
      li {
        margin-right: 20px;
        a {
          color: #000;
          font-size: large;
          font-weight: 700;
          text-decoration: none;
          &:hover {
            color: #05b1ec;
          }
        }
      }
    }
  }
}
.active {
  color: #05b1ec;
}

footer {
  margin-top: 50px;
  .top {
    display: flex;
    justify-content: space-between;
    dl {
      margin-right: 70px;
      dt {
        margin-bottom: 30px;
        font-size: 20px;
        font-weight: 700;
        color: #5f6464;
      }
      dd {
        font-size: 16px;
        color: #5f6464;
        margin-top: 10px;
      }
    }
    .left {
      display: flex;
    }
    .right {
      display: flex;
      dl {
        display: flex;
        flex-direction: column;
      }
      .img {
        padding-top: 20px;
        img {
          width: 100px;
          height: auto;
        }
      }
    }
  }
  .bottom {
    padding-top: 50px;
    text-align: center;
  }
}
</style>
